<!-- 20210301 -->
<template>
	<view class="layer-pay-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 支付浮层 -->
			<ty-layer-pop-up v-if="show" @overlayClick="close">
				<!-- 内容区域 -->
				<view class="layer-content padding-bottom-safe bg-ff" @click.stop="">
					<!-- 付款信息 -->
					<view class="position-relative margin-lr-30 padding-top-40 padding-bottom-30 border-bottom-ed">
						<view class="flex flex-direction align-center">
							<view class="text-32">确认付款</view>
							<view class="text-price text-60">{{payMoney}}</view>
						</view>
						<text class="close-btn tyIcon-close text-30 text-aa" @click='close'></text>
					</view>

					<!-- 选择支付方式 -->
					<view class="padding-lr-30 padding-tb-20 border-bottom-ed">

						<radio-group class="width-100p" @change="radioChange">

							<!-- #ifdef APP-PLUS|MP-WEIXIN|H5 -->
							<label class="width-100p" v-if="payWay.includes('weixin')">
								<view class="padding-tb-20 flex align-center justify-between">
									<view class="flex">
										<text class="icon tyIcon-wxpay text-40 text-wechat"></text>
										<view class="margin-left-30 text-28">微信支付</view>
									</view>
									<view>
										<radio value="1" :checked="pay_type == 1" :color="color"
											style="transform:scale(0.7)" />
									</view>
								</view>
							</label>
							<!-- #endif -->

							<!-- #ifdef APP-PLUS|MP-ALIPAY|H5 -->
							<label class="width-100p" v-if="payWay.includes('alipay') && !isWeixinEnv">
								<view class="padding-tb-20 flex align-center justify-between">
									<view class="flex">
										<text class="icon tyIcon-alipay text-40 text-alipay"></text>
										<view class="margin-left-30 text-28">支付宝支付</view>
									</view>
									<view>
										<radio value="2" :checked="pay_type == 2" :color="color"
											style="transform:scale(0.7)" />
									</view>
								</view>
							</label>
							<!-- #endif -->

							<label class="width-100p" v-if="payWay.includes('money')">
								<view class="padding-tb-20">
									<view class="flex align-center justify-between">
										<view class="flex">
											<text class="icon tyIcon-money text-40" style="color:#E2B46F"></text>
											<view class="margin-left-30 text-28">余额支付</view>
										</view>
										<view>
											<radio value="3" :checked="pay_type == 3" :disabled="money_disabled"
												:color="color" style="transform:scale(0.7)" />
										</view>
									</view>
									<view class="margin-left-70 text-24 text-main">当前余额{{money}}</view>
								</view>
							</label>

						</radio-group>
					</view>

					<view class="padding-30">
						<view class="line-height-90 radius-45 bg-main text-center text-32 text-ff" @click="pay">
							去支付
						</view>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js';
	export default {
		props: {
			// 是否显示该浮层
			show: {
				type: Boolean,
				default: false
			},
			// 支付金额
			payMoney: {
				type: [Number, String],
				default: 0
			},
			// 支持支付方式
			payWay: {
				type: Array,
				default: () => ['weixin', 'alipay', 'money']
			},
			// 余额
			money: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				pay_type: '', //当前选中支付方式
				color: common.mainColor(),
				isWeixinEnv: common.userAgent() == 'weixin' ? true : false
			}
		},
		computed: {
			money_disabled() {
				return parseFloat(this.payMoney) <= parseFloat(this.money) ? false : true
			}
		},
		methods: {
			//关闭浮层
			close() {
				this.$emit("update:show", false)
			},

			radioChange(e) {
				this.pay_type = e.detail.value
			},

			//去付款
			pay() {
				if (!this.pay_type) {
					common.toast('请选择支付方式')
					return false
				}
				this.$emit('pay', {
					pay_type: this.pay_type
				})
			}
		}
	}
</script>

<style scoped>
	/* 浮层内容区域 */
	.layer-content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
	}

	/* 关闭按钮 */
	.close-btn {
		position: absolute;
		top: 30rpx;
		right: 0;
	}

	/* 支付方式图标 */
	.icon {
		width: 40rpx;
	}
</style>